<template>
    <div class="father">
      <h1>$refs-$parent Father组件</h1>
      <h2>$refs拿到当前组件的所有被ref打标记的DOM元素或组件实例
        ,$parent拿到当前组件的父组件的组件实例,但是想操作数据必须暴露出让你修改的数据</h2>
      <h1>Father的存款:{{ fatherMoney }}万</h1>

      <!-- 修改子组件的数据 -->
      <button @click="changeChindOneToy">ChildOne的玩具+1</button>
      <button @click="changeChindTwoComputer">ChildTwo的电脑+1</button>

      <!-- 这里传入的$refs是当前组件里所有被ref属性标识的DOM元素或组件实例 -->
      <button @click="changeAllChildBook($refs)">所有子组件的书+3</button>

      <!-- 展示子组件 -->
      <ChildOne ref="childOne"/>
      <ChildTwo ref="childTwo"/>
    </div>
  </template>
  
  <script lang="ts" setup>
    import ChildOne from './ChildOne.vue'
    import ChildTwo from './ChildTwo.vue'
    import { ref } from "vue";

    //数据
    const fatherMoney = ref(100)

    //打标记
    const childOne = ref()
    const childTwo = ref()

    //方法
    //首先refs是一个对象，里面有2个对象属性，分别是childOne和childTwo，所以这里的instance是一个形参也是一个对象
    function changeAllChildBook(refs:[{instance}]){
      // 这个方法里的refs是形参，真正传入并打印的$refs值为对象，包含所有被ref属性标识的DOM元素或组件实例
      // console.log(refs);

      // 遍历refs对象，拿到所有的实例，然后修改实例里面的数据
      for (let instance in refs){
        //这里打印的instance是实例childOne和childTwo
        console.log(instance);
        //子组件必须暴露数据，才能拿到数据
			  refs[instance].book += 3
		}
    }

    //修改ChildOne的数据
    function changeChindOneToy(){
        childOne.value.toy += 1
    }
    //修改ChildTwo的数据
    function changeChindTwoComputer(){
        childTwo.value.computer += 1
    }

    //暴露数据
    defineExpose({
      fatherMoney
    })
  </script>
  
  <style scoped>
  </style>